import { createBrowserRouter } from "react-router-dom";
import { AuthRoute } from "../components/AuthRoute";
import Login from "../pages/Login/index";
import Layout from "../pages/Layout/index";

import { lazy, Suspense } from "react";
const Home = lazy(() => import("../pages/Home"));
const Article = lazy(() => import("../pages/Article"));
const Publish = lazy(() => import("../pages/Publish"));
const NotFound = lazy(() => import("../pages/NotFound"));

const router = createBrowserRouter([
  {
    path: "/",
    element: (
      <AuthRoute>
        <Layout></Layout>
      </AuthRoute>
    ),
    children: [
      {
        // path: "home",
        index: true,
        element: (
          <Suspense>
            <Home></Home>
          </Suspense>
        ),
      },
      {
        path: "article",
        element: (
          <Suspense>
            <Article></Article>
          </Suspense>
        ),
      },
      {
        path: "publish",
        element: (
          <Suspense>
            <Publish></Publish>
          </Suspense>
        ),
      },
    ],
  },
  {
    path: "/login",
    element: <Login></Login>,
  },
  {
    path: "*",
    element: (
      <Suspense>
        <NotFound></NotFound>
      </Suspense>
    ),
  },
]);

export default router;
